import { defineComponent, ref } from 'vue'
import { NCard, NSpace, NTabPane, NTabs, useMessage } from 'naive-ui'
import healthDegree from '@/views/integration/govern/healthDegree'
import tabTable from '@/views/integration/govern/tab-table'
import { getQueryListData } from '@/service/modules/integration-assets'
import { getGovernGlobalSize } from '@/service/modules/integration-govern'

const govern = defineComponent({
  name: 'govern',
  components: {
    healthDegree,
    tabTable
  },
  setup() {
    const tabCount = ref({
      calc: 0,
      storage: 0,
      spec: 0,
      security: 0,
      quality: 0
    })

    const tableCount = ref(0)

    getQueryListData()
      .then((res: any) => {
        tableCount.value = res.data.tableNameList.length
      })
      .catch((err: any) => {
        message.error(err.msg ? err.msg : '接口未知错误')
      })

    const globalSize = ref('')

    getGovernGlobalSize()
      .then((res: any) => {
        globalSize.value = res.data
      })
      .catch((err: any) => {
        message.error(err.msg ? err.msg : '接口未知错误')
      })

    const channelScoreList = function (list: any[]) {
      tabCount.value.calc = list[0]
      tabCount.value.storage = list[1]
      tabCount.value.spec = list[2]
      tabCount.value.security = list[3]
      tabCount.value.quality = list[4]
    }

    const message = useMessage()

    return {
      tabCount,
      tableCount,
      globalSize,
      channelScoreList,
      message
    }
  },
  render() {
    return (
      <NSpace vertical>
        <div style={'width: 100%; display: flex'}>
          <NCard size='small' title='健康度总分'>
            <div
              style={
                'width: 100%; display: flex; justify-content: space-between'
              }
            >
              <healthDegree
                onChannelScoreList={this.channelScoreList}
              ></healthDegree>
            </div>
          </NCard>
          <NCard size='small' title='成本概览'>
            <div style={'width: 100%; display: flex'}>
              <NCard title='数 据 表'>{this.tableCount} 张</NCard>
              <NCard title='存 储 量'>{this.globalSize}</NCard>
            </div>
          </NCard>
        </div>
        <NCard size='small'>
          <NTabs type='line' animated>
            <NTabPane name='calc' tab={'计算 ' + this.tabCount.calc}>
              <tabTable apiUriType={0}></tabTable>
            </NTabPane>
            <NTabPane name='storage' tab={'存储 ' + this.tabCount.storage}>
              <tabTable apiUriType={1}></tabTable>
            </NTabPane>
            <NTabPane name='spec' tab={'规范 ' + this.tabCount.spec}>
              <tabTable apiUriType={2}></tabTable>
            </NTabPane>
            <NTabPane name='security' tab={'安全 ' + this.tabCount.security}>
              <tabTable apiUriType={3}></tabTable>
            </NTabPane>
            <NTabPane name='quality' tab={'质量 ' + this.tabCount.quality}>
              <tabTable apiUriType={4}></tabTable>
            </NTabPane>
          </NTabs>
        </NCard>
      </NSpace>
    )
  }
})

export default govern
